Vue.component("my-header", {
    template: `
     <div>
     <!----start-header----->
    <div class="header">
        <div class="wrap">
        <div class="top-header">
        <div class="logo">
        <a href="index.html"><img src="images/logo1.png" title="logo" /></a>
    </div>
    <div class="social-icons">
    <ul>
        <li><a href="登录.html"><img src="images/登录.png" title="登录" /></a></li>
      <li><a href="登录.html"><img src="images/注册.png" title="注册" /></a></li>
      <li><a href="#"><img src="images/个人主页.png" title="个人主页" /></a></li>
      <li><a href="#"><img src="images/上传.png" title="上传" /></a></li>
     </ul>
    </div>
    <div class="clear"> </div>
   </div>
   <!---start-top-nav---->
   <div class="top-nav">
    <div class="top-nav-left">
     <ul>
      <li class="active"><a href="index.html">主页</a></li>
      <li><a href="about.html">菜谱</a></li>
      <li><a href="services.html">美食分享</a></li>
      <li><a href="gallery.html">联系</a></li>
      <li><a href="contact.html">公告</a></li>
      <div class="clear"> </div>
     </ul>
    </div>
    <div class="top-nav-right">
     <form>
      <input type="text"><input type="submit" value="" />
     </form>
    </div>
    <div class="clear"> </div>
   </div>
   <!---End-top-nav---->
  </div>
 </div>
   <!----End-header----->
     </div>
    `
})
Vue.component("my-footer", {
    template: `
     <div class="footer">
    <div class="wrap">
    <div class="footer-grid">
        <h3>关于我们</h3>
        <p>嘎嘎好吃菜谱网主要有8个栏目频道：鲁菜菜谱、川菜菜谱、粤菜菜谱、江苏菜菜谱、闽菜菜谱、浙江菜菜谱、湘菜菜谱、徽菜菜谱的各个分类，用户可以根据自己的需求寻找相应的菜肴。</p>
        <a href="about.html">点击跳转到菜品分类</a>
    </div>
    <div class="footer-grid center-grid">
        <h3>友情链接(得加钱)</h3>
        <ul>
        <li><a href="https://www.meishij.net/">美食杰菜谱</a></li>
        <li><a href="https://home.meishichina.com/recipe/jiachang/">美食天下菜谱</a></li>
        <li><a href="https://www.xinshipu.com/">心食谱</a></li>
        <li><a href="http://www.txcai.com/">天下菜谱</a></li>
        <li><a href="https://www.shipuxiu.com/">食谱秀</a></li>
        </ul>
    </div>
<div class="footer-grid twitts">
<h3>最新推文</h3>
<p><label>@Lorem ipsum</label>dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<span>10 minutes ago</span>
<p><label>@consectetur</label>dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<span>15 minutes ago</span>
</div>
<div class="footer-grid">
<h3>你知道吗?</h3>
<p>近日，教育部印发《义务教育课程方案》和《义务教育劳动课程标准（2022年版）》（以下简称《标准》），将“整理与收纳”“家庭清洁、烹饪、家居美化”等列入不同学段目标，受到社会关注。劳动作为一项基本的生存技能，成为独立课程体现了教育理念的进步。</p>
<a href="http://js.people.com.cn/n2/2022/0507/c360299-35257607.html">我不知道</a>
</div>
<div class="clear"> </div>
</div>
<div class="clear"> </div>
</div>
<div class="copy-right">
<div class="top-to-page">
<a href="#top" class="scroll"> </a>
<div class="clear"> </div>
</div>
<p>Copyright &copy; 2022.嘎嘎好吃_dish All rights reserved.<a target="_blank" href="gallery.html">联系我们</a></p>
</div>
 <!---End-footer---->
    `
})